<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支教需求 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/hero.css">
    <link rel="stylesheet" href="css/particles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        /* 支教需求页面特定样式 */
        .demands-header {
            position: relative;
            background: linear-gradient(135deg, #306693, #5bc0eb, #4492ff);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: white;
            padding: 100px 0 80px;
            text-align: center;
            margin-bottom: 50px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(48, 99, 147, 0.3);
        }
        
        .demands-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to right, #5bc0eb, #4492ff, #306693);
        }
        
        .demands-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
            z-index: 1;
        }
        
        .demands-header .container {
            position: relative;
            z-index: 2;
        }
        
        .demands-header-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            backdrop-filter: blur(5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transform: translateY(0);
            animation: float 6s ease-in-out infinite;
        }
        
        .demands-header h1 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 20px;
            animation: fadeInDown 1s ease-in-out;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            letter-spacing: 1px;
        }
        
        .demands-header h1 .highlight {
            color: #448cff;
            position: relative;
            display: inline-block;
        }
        
        .demands-header h1 .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #449bff;
            animation: widthGrow 1.5s ease-in-out;
        }
        
        .demands-header p {
            font-size: 19px;
            max-width: 700px;
            margin: 0 auto 35px;
            animation: fadeInUp 1.2s ease-in-out;
            opacity: 0.95;
            line-height: 1.6;
            font-weight: 300;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .demands-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
            animation: fadeInUp 1.6s ease-in-out;
        }
        
        .demand-stat-item {
            text-align: center;
            position: relative;
            width: 100px;
            height: 100px;
        }
        
        .demand-stat-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: 700;
            color: #44abff;
            z-index: 2;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .demand-stat-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            right: 0;
            font-size: 14px;
            opacity: 0.9;
        }
        
        .demand-stat-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }
        
        .demand-stat-circle::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border-radius: 50%;
            border: 5px solid rgba(68, 165, 255, 0.5);
            border-top-color: #449bff;
            border-right-color: #44b4ff;
            transform: rotate(45deg);
        }
        
        .filter-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(48, 88, 147, 0.1);
            padding: 25px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .filter-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #447cff, #306193);
        }
        
        .filter-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
        }
        
        .filter-title::before {
            content: '●';
            color: #447cff;
            margin-right: 8px;
            font-size: 14px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .filter-tag {
            background-color: #e6f4fb;
            border: 1px solid #b3d9ff;
            color: #306693;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .filter-tag::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
        }
        
        .filter-tag:hover::before {
            left: 100%;
        }
        
        .filter-tag:hover, .filter-tag.active {
            background-color: #5bc0eb;
            color: white;
            border-color: #4492ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(106, 48, 147, 0.2);
        }
        
        .demands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .demand-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 25px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 1;
            animation: fadeIn 0.5s ease-in-out;
            animation-fill-mode: both;
        }
        
        .demand-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, #44a8ff, #305893);
            z-index: 2;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }
        
        .demand-card:hover::before {
            transform: scaleX(1);
        }
        
        .demand-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(48, 88, 147, 0.15);
        }
        
        .demand-tag {
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px 15px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            border-bottom-left-radius: 12px;
            z-index: 3;
        }
        
        .demand-tag.urgent {
            background-color: #ff4757;
            box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3);
        }
        
        .demand-tag.regular {
            background-color: #546de5;
            box-shadow: 0 2px 10px rgba(84, 109, 229, 0.3);
        }
        
        .demand-tag.long-term {
            background-color: #2ed573;
            box-shadow: 0 2px 10px rgba(46, 213, 115, 0.3);
        }
        
        .demand-card h3 {
            font-size: 18px;
            margin: 15px 0 20px;
            color: #333;
            position: relative;
            padding-bottom: 10px;
        }
        
        .demand-card h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: #4492ff;
        }
        
        .demand-info {
            margin-bottom: 20px;
        }
        
        .demand-info p {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            color: #666;
        }
        
        .demand-info i {
            margin-right: 8px;
            color: #448cff;
        }
        
        .btn-outline {
            display: inline-block;
            padding: 8px 20px;
            border: 2px solid #3498db;
            color: #3498db;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            text-align: center;
        }
        
        .btn-outline:hover {
            background-color: #3498db;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(41, 128, 185, 0.2);
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            margin-bottom: 50px;
        }
        
        .pagination-item {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0d1ff;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: white;
        }
        
        .pagination-item:hover, .pagination-item.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(41, 128, 185, 0.2);
        }
        
        .no-results {
            text-align: center;
            padding: 40px 0;
            color: #666;
        }
        
        .no-results i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 15px;
            display: block;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInFromBottom {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        @keyframes widthGrow {
            from { width: 0; }
            to { width: 100%; }
        }
        
        .btn-lg {
            padding: 12px 28px;
            font-size: 16px;
            border-radius: 30px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(106, 48, 147, 0.3);
            transition: all 0.3s ease;
            animation: slideInFromBottom 1.2s ease-in-out;
            background: linear-gradient(to right, #5bc0eb, #4492ff);
            border: none;
            color: white;
        }
        
        .btn-lg:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(106, 48, 147, 0.4);
            background: linear-gradient(to right, #4492ff, #5bc0eb);
        }
        
        .btn-lg i {
            margin-right: 8px;
        }
        
        .demand-card:nth-child(2) { animation-delay: 0.1s; }
        .demand-card:nth-child(3) { animation-delay: 0.2s; }
        .demand-card:nth-child(4) { animation-delay: 0.3s; }
        .demand-card:nth-child(5) { animation-delay: 0.4s; }
        .demand-card:nth-child(6) { animation-delay: 0.5s; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html" class="active">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="demands-header">
        <div class="hero-particles" id="particles-js"></div>
        <div class="container">
            <div class="demands-header-content">
                <h1><span class="highlight">支教需求</span></h1>
                <p>浏览全国各地的支教需求，找到适合您的支教机会</p>
                <a href="post-demand.html" class="btn btn-primary btn-lg">
                    <i class="bi bi-plus-circle"></i>发布支教需求
                </a>
                <div class="demands-stats">
                    <div class="demand-stat-item">
                        <div class="demand-stat-circle"></div>
                        <div class="demand-stat-number">200+</div>
                        <div class="demand-stat-label">支教学校</div>
                    </div>
                    <div class="demand-stat-item">
                        <div class="demand-stat-circle"></div>
                        <div class="demand-stat-number">500+</div>
                        <div class="demand-stat-label">志愿者</div>
                    </div>
                    <div class="demand-stat-item">
                        <div class="demand-stat-circle"></div>
                        <div class="demand-stat-number">50+</div>
                        <div class="demand-stat-label">合作机构</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 筛选区域 -->
        <section class="filter-section">
            <div class="filter-group">
                <div class="filter-title">需求类型</div>
                <div class="filter-options">
                    <div class="filter-tag active">全部</div>
                    <div class="filter-tag">紧急需求</div>
                    <div class="filter-tag">长期支教</div>
                    <div class="filter-tag">短期支教</div>
                    <div class="filter-tag">线上支教</div>
                </div>
            </div>
            
            <div class="filter-group">
                <div class="filter-title">地区</div>
                <div class="filter-options">
                    <div class="filter-tag active">全部</div>
                    <div class="filter-tag">华东</div>
                    <div class="filter-tag">华南</div>
                    <div class="filter-tag">华中</div>
                    <div class="filter-tag">华北</div>
                    <div class="filter-tag">西南</div>
                    <div class="filter-tag">西北</div>
                    <div class="filter-tag">东北</div>
                </div>
            </div>
            
            <div class="filter-group">
                <div class="filter-title">学科</div>
                <div class="filter-options">
                    <div class="filter-tag active">全部</div>
                    <div class="filter-tag">语文</div>
                    <div class="filter-tag">数学</div>
                    <div class="filter-tag">英语</div>
                    <div class="filter-tag">物理</div>
                    <div class="filter-tag">化学</div>
                    <div class="filter-tag">生物</div>
                    <div class="filter-tag">历史</div>
                    <div class="filter-tag">地理</div>
                    <div class="filter-tag">政治</div>
                    <div class="filter-tag">音乐</div>
                    <div class="filter-tag">美术</div>
                    <div class="filter-tag">体育</div>
                    <div class="filter-tag">信息技术</div>
                    <div class="filter-tag">综合课程</div>
                </div>
            </div>
        </section>

        <!-- 需求列表 -->
        <section class="demands-list">
            <div class="demands-grid">
                <!-- 需求卡片 -->
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>山区小学语文教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 云南省丽江市</p>
                        <p><i class="bi bi-calendar3"></i> 2023-10-01 至 2023-12-31</p>
                        <p><i class="bi bi-book"></i> 语文、数学</p>
                        <p><i class="bi bi-people"></i> 需求人数：2人</p>
                    </div>
                    <a href="demand-detail.html?id=1" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>乡村初中英语教师招募</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 贵州省黔东南州</p>
                        <p><i class="bi bi-calendar3"></i> 2023-09-15 至 2024-01-15</p>
                        <p><i class="bi bi-book"></i> 英语</p>
                        <p><i class="bi bi-people"></i> 需求人数：1人</p>
                    </div>
                    <a href="demand-detail.html?id=2" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>留守儿童课后辅导</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 四川省凉山州</p>
                        <p><i class="bi bi-calendar3"></i> 2023-10-10 至 2023-12-20</p>
                        <p><i class="bi bi-book"></i> 综合课程</p>
                        <p><i class="bi bi-people"></i> 需求人数：3人</p>
                    </div>
                    <a href="demand-detail.html?id=3" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag long-term">长期</div>
                    <h3>高中物理教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 甘肃省天水市</p>
                        <p><i class="bi bi-calendar3"></i> 2023-09-01 至 2024-06-30</p>
                        <p><i class="bi bi-book"></i> 物理</p>
                        <p><i class="bi bi-people"></i> 需求人数：1人</p>
                    </div>
                    <a href="demand-detail.html?id=4" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag regular">常规</div>
                    <h3>小学数学教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 湖南省湘西州</p>
                        <p><i class="bi bi-calendar3"></i> 2023-11-01 至 2024-01-31</p>
                        <p><i class="bi bi-book"></i> 数学</p>
                        <p><i class="bi bi-people"></i> 需求人数：2人</p>
                    </div>
                    <a href="demand-detail.html?id=5" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag regular">常规</div>
                    <h3>初中历史教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 青海省海东市</p>
                        <p><i class="bi bi-calendar3"></i> 2023-10-15 至 2024-02-15</p>
                        <p><i class="bi bi-book"></i> 历史</p>
                        <p><i class="bi bi-people"></i> 需求人数：1人</p>
                    </div>
                    <a href="demand-detail.html?id=6" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag long-term">长期</div>
                    <h3>乡村小学全科教师</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 新疆喀什地区</p>
                        <p><i class="bi bi-calendar3"></i> 2023-09-01 至 2024-08-31</p>
                        <p><i class="bi bi-book"></i> 语文、数学、英语</p>
                        <p><i class="bi bi-people"></i> 需求人数：2人</p>
                    </div>
                    <a href="demand-detail.html?id=7" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag regular">常规</div>
                    <h3>音乐特长教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 广西百色市</p>
                        <p><i class="bi bi-calendar3"></i> 2023-11-10 至 2024-01-10</p>
                        <p><i class="bi bi-book"></i> 音乐</p>
                        <p><i class="bi bi-people"></i> 需求人数：1人</p>
                    </div>
                    <a href="demand-detail.html?id=8" class="btn btn-outline">查看详情</a>
                </div>
                
                <div class="demand-card">
                    <div class="demand-tag regular">常规</div>
                    <h3>美术教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 河北省张家口市</p>
                        <p><i class="bi bi-
                    <script src="js/main.js"></script>
                    <script src="js/demands.js"></script>
                    <script src="js/hero-particles.js"></script>
                </body>
                </html>